<template>
  <div>
    <el-card shadow="never" class="mx-2">
      <template #header>
        <span>{{ t('route.e5') }}</span>
      </template>
      <div v-loading="loading" class="">
        <el-form ref="formRef"  :model="form" :rules="rules" label-width="auto" status-icon>
          <el-form-item :label="$t('form.58')" prop="fee_fixed">
            <el-input :min="0" class="init" v-model.number="form.fee_fixed" type="number" :placeholder="t('hint.119')" />
          </el-form-item>
          <el-form-item :label="$t('form.59')" prop="fee_rate">
            <el-input :min="0" class="init" v-model.number="form.fee_rate" type="number" :placeholder="t('hint.51')">
              <template #append>%</template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('form.60')" prop="min_amount">
            <el-input :min="1" class="init" v-model.number="form.min_amount" type="number" :placeholder="t('hint.120')" />
          </el-form-item>
          <el-form-item :label="$t('form.61')" prop="turnover_rate">
            <el-input :min="0" class="init" v-model.number="form.turnover_rate" type="number" :placeholder="t('hint.121')" >
              <template #append>%</template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('form.62')" prop="daily_limit_enabled">
            <el-switch  v-model="form.daily_limit_enabled" :active-action="true" :inactive-action="false" />
          </el-form-item>
          <el-form-item v-if="form.daily_limit_enabled" :label="$t('form.63')" prop="daily_max_times">
            <el-input :min="1" class="init" v-model.number="form.daily_max_times" type="number" :placeholder="t('hint.123')" />
          </el-form-item>
          <el-form-item :label="$t('form.64')" prop="require_integer">
            <el-switch v-model="form.require_integer" :active-action="true" :inactive-action="false" />
            <span class="text-gray-400 text-sm ml-2">{{ t('hint.require_integer') }}</span>
          </el-form-item>
          <el-form-item :label="$t('form.65')" prop="prevent_multiple_pending">
            <el-switch v-model="form.prevent_multiple_pending" :active-action="true" :inactive-action="false" />
            <span class="text-gray-400 text-sm ml-2">{{ t('hint.prevent_multiple_pending') }}</span>
          </el-form-item>
          <el-form-item :label="$t('form.66')" prop="allow_without_turnover">
            <el-switch v-model="form.allow_without_turnover" :active-action="true" :inactive-action="false" />
            <span class="text-gray-400 text-sm ml-2">{{ t('hint.allow_without_turnover') }}</span>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" @click="submitForm()">{{ $t('btn.1') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import Api from '@/api/setting/withdraw'
import { onMounted } from 'vue'
const { t } = useI18n();
const loading = ref(false)

const formRef = ref()
// 表单初始化数据
const form = ref({
  fee_fixed: 0, // 固定手续费
  fee_rate: 0, // 手续费率(%)
  min_amount: 1, // 最小金额
  turnover_rate: 0, // 流水比例(%)

  daily_limit_enabled: false, // 每日次数限制
  daily_max_times: 1, // 每日最大次数
  require_integer: false, // 整数限制

  prevent_multiple_pending: false, // 订单限制
  allow_without_turnover: false, // 流水限制
})

// 规则校验
const rules = {
  fee_fixed: [{ required: true, message: t('hint.119'), trigger: 'blur' }],
  fee_rate: [{ required: true, message: t('hint.51'), trigger: 'blur' }],
  min_amount: [{ 
    required: true, message: t('hint.120'), trigger: 'blur' 
  },{
    validator: (rule, value, callback) => {
      if (Number(value) <= 0) {
        callback(new Error(t('hint.127')))
      } else {
        callback()
      }
    }, trigger: ['blur', 'change']
  }],
  turnover_rate: [{ required: true, message: t('hint.121'), trigger: 'blur' }],
  daily_max_times: [{
     required: true, message: t('hint.123'), trigger: 'blur'
  },{
    validator: (rule, value, callback) => {
      const numValue = Number(value);
      // 检查是否为整数且大于等于1
      console.log('Number.isInteger(value)==<',!Number.isInteger(numValue),Number(numValue))
      if (!Number.isInteger(numValue) || numValue < 1) {
        callback(new Error(t('hint.128'))); // 提示错误信息
      } else {
        callback(); // 验证通过
      }
    }, trigger: ['change']
  }]
}

// 获取数据
const getInfo = () => {
  loading.value = true
  Api.get().then((res) => {
    form.value = res.data
  }).finally(() => {
    loading.value = false
  })
}

// 表单提交
const submitForm = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      Api.put(form.value).then(s => {
        ElMessage.success(t('hint.29'))
      }).finally(() => {
        loading.value = false
      })
    }
  })
}

onMounted(() => {
  getInfo()
})
</script>

<style lang="scss" scoped>
.init{
  width:250px;
}
</style>
